<template>
  <div class="map_header">
    <!-- background:rgba(255, 0, 0, 0.0);用来辅助测试观察布局效果 -->
    <div class="map_logo">
      <img src="@/assets/images/logo_v3.png" alt="" style="height: 100%" />
      National data
    </div>
    <div class="map_weather_info">
      <div style="
                                      background: rgba(255, 0, 0, 0);
                                      color: #ffffff;
                                      width: 32px;
                                      height: 32px;
                                    ">
        <img src="@/assets/images/map/多云.png" alt="" style="height: 100%" />
      </div>
      <div style="
                                      height: 30px;
                                      width: 1px;
                                      background: rgba(0, 160, 200, 0.4);
                                      margin-left: 10px;
                                    "></div>
      <div style="
                                      background: rgba(255, 0, 0, 0);
                                      color: #ffffff;
                                      margin-left: 10px;
                                      height: 28px;
                                    ">
        <img src="@/assets/images/map/PM2.5.png" alt="" style="height: 28px" />
      </div>

      <div style="
                                      background: rgba(255, 0, 0, 0);
                                      color: #ffffff;
                                      margin-left: 10px;
                                    ">
        57.0
      </div>
      <div style="
                                      height: 30px;
                                      width: 1px;
                                      background: rgba(0, 160, 200, 0.4);
                                      margin-left: 10px;
                                    "></div>
      <div style="
                                      background: rgba(255, 0, 0, 0);
                                      color: #ffffff;
                                      margin-left: 0px;
                                      height: 32px;
                                    ">
        <img src="@/assets/images/map/温度.png" alt="" style="height: 32px" />
      </div>
      <div style="background: rgba(255, 0, 0, 0); color: #ffffff; margin-left: 0px">
        36.5
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PageHeader",
};
</script>


<style lang="scss" scoped>
.map_header {
  width: 100%;
  height: 70px;
  padding: 10px;
  line-height: 50px;
  color: #ffbf51;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;

  .map_logo {
    display: flex;
    font-size: 28px;
    text-transform: uppercase;
    font-family: fantasy;

    img {
      margin-right: 10px;
    }
  }

  .map_weather_info {
    display: flex;
    align-items: center;
  }
}
</style>
